<template>
  <div class="scroll-section" :class="direction + '-section section'">
    <div class="wrapper">
      <div role="list" class="list">
        <div v-for="(item, index) in dataList" :key="index" role="listitem" class="item">
          <div class="item_content">
            <h2 class="item_number">{{ item.mainTitle }}</h2>
            <h2>{{ item.subTitle }}</h2>
            <p class="item_p">{{ item.description }}</p>
          </div>
          <video 
            :src="item.videoUrl"
            loading="lazy"
            autoplay
            muted
            loop
            class="item_media"
          ></video>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

const props = defineProps({
  direction: {
    type: String,
    required: true,
    validator: value => ['horizontal', 'vertical'].includes(value)
  },
  dataList: {
    type: Array,
    required: true,
    default: () => []
  }
});

onMounted(() => {
  initScroll();
});

const initScroll = () => {
  const section = document.querySelector(`.${props.direction}-section`);
  const wrapper = section.querySelector(".wrapper");
  const items = wrapper.querySelectorAll(".item");

  items.forEach((item, index) => {
    if (index !== 0) {
      props.direction === "horizontal"
        ? gsap.set(item, { xPercent: 100 })
        : gsap.set(item, { yPercent: 100 });
    }
  });

  const timeline = gsap.timeline({
    scrollTrigger: {
      trigger: section,
      pin: true,
      start: "top top",
      end: () => `+=${items.length * 100}%`,
      scrub: 1,
      invalidateOnRefresh: true,
      // markers: true,
    },
    defaults: { ease: "none" }
  });

  items.forEach((item, index) => {
    timeline.to(item, {
      scale: 0.9,
      borderRadius: "10px"
    });

    props.direction === "horizontal"
      ? timeline.to(items[index + 1], { xPercent: 0 }, "<")
      : timeline.to(items[index + 1], { yPercent: 0 }, "<");
  });
};
</script>

<style scoped>
/* Add your styles here if needed */
</style>